import styles from './index.module.scss'
import { useState, useRef, useEffect } from 'react'
import {
  Card,
  Breadcrumb,
  Form,
  Input,
  Button,
  Space,
  Radio,
  Upload,
  message
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useHistory, useParams } from 'react-router-dom'
import Channel from '@/components/Channel'
import { useDispatch } from 'react-redux'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import {
  saveArticle,
  getArticleDetail,
  editArticle
} from '@/store/actions/article'

export default function Publish () {
  const { id } = useParams()
  console.log('动态路由的参数是', id)
  useEffect(
    () => {
      // 不能直接给副作用函数加async
      // 在内部额外定义函数，在async
      const getDetail = async () => {
        const article = await dispatch(getArticleDetail(id))

        // 表单回填
        console.log('article', article)
        refForm.current.setFieldsValue({
          title: article.data.title,
          content: article.data.content,
          channel_id: article.data.channel_id,
          type: article.data.cover.type
        })
        // 更新文章的类型
        setType(article.data.cover.type)
        // 设置图片列表
        setFileList(article.data.cover.images.map((item) => ({ url: item })))
      }

      if (!id) {
        return
      }

      getDetail()
    },
    [id]
  )

  useEffect(() => {
    return () => {
      console.log('组件销毁啦......')
    }
  }, [])

  const dispatch = useDispatch()
  const history = useHistory()

  const refForm = useRef(null)
  // 图片列表变动，包括：上传成功，删除图片
  const handleUpload = ({ file, fileList }) => {
    console.log(fileList.length)
    // 1. 更新fileList
    setFileList(fileList)

    // 2. 把最新的fileList保存到 图片容器
    refFileList.current = fileList

    // 3. 手动触发表单校验
    refForm.current.validateFields(['type'])
  }

  // 封面的类型： 0 - 无图
  const [type, setType] = useState(1)

  const [fileList, setFileList] = useState(
    [
      // {
      //   url:
      //     'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      // },
      // {
      //   url:
      //     'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      // }
    ]
  )
  // 图片容器
  const refFileList = useRef(fileList)

  // 组装参数
  const buildData = (values) => {
    console.log(values, fileList)
    // 按接口文档的要求，去组装参数
    const data = {
      title: values.title,
      content: values.content,
      channel_id: values.channel_id,
      cover: {
        type: values.type,
        images: fileList.map((it) => {
          return it.url || it.response.data.url
        })
        // images:['图片地址1', '图片地址2', ...]
      }
    }
    console.log('组装的参数是', data)
    return data
  }

  // 添加文章的动作。
  // values: 数据， isDraft是否草稿
  const doAddOrEdit = async (values, isDraft) => {
    // 组装参数
    const data = buildData(values)
    try {
      if (id) {
        // 编辑
        await dispatch(editArticle(data, isDraft, id))

        message.success('编辑成功', 0.5, () => {
          // 跳转到 内容管理页面 来查看编辑结果
          history.push('/home/list')
        })
      } else {
        await dispatch(saveArticle(data, isDraft))

        message.success('添加成功', 0.5, () => {
          // 跳转到 内容管理页面 来查看添加结果
          history.push('/home/list')
        })
      }
    } catch (err) {}
  }

  // 保存草稿
  const saveArticleDraft = async () => {
    // 1. 获取表单数据
    const data = await refForm.current.validateFields()

    console.log('获取表单数据', data)
    // 2. 添加文章，是草稿
    doAddOrEdit(data, true)
  }

  // 添加文章，不是草稿
  const onFinish = async (values) => {
    doAddOrEdit(values, false)
  }

  return (
    <div className={styles.root}>
      <Card
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>{id ? '编辑' : '发布'}文章</Breadcrumb.Item>
          </Breadcrumb>
        }>
        <Form
          ref={refForm}
          validateTrigger="onBlur"
          onFinish={onFinish}
          initialValues={{ content: '请输入文章的内容', title: '测试标题', type: 1 }}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          size="large">
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: '标题不能为空' }]}>
            <Input placeholder="请输入文章的标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: '频道不能为空' }]}>
            <Channel />
          </Form.Item>
          {type}
          <Form.Item
            label="封面"
            name="type"
            rules={[
              {
                validator (rule, value) {
                  console.log('封面', value)
                  if (value === fileList.length) {
                    return Promise.resolve()
                  } else {
                    return Promise.reject(new Error('请检查上传图片的数量'))
                  }
                }
              }
            ]}>
            <Radio.Group
              value={type}
              onChange={(e) => {
                // 切换图片
                // 1. 更新数量
                setType(e.target.value)
                // 2. 修改fileList ----> 更新页面上的图片列表
                //    3 -> 1。 保留第1张
                //    1 -> 3。 把之前的3张图恢复
                // 从数组中做截取
                setFileList(refFileList.current.slice(0, e.target.value))
              }}>
              <Radio value={0}>无图</Radio>
              <Radio value={3}>3图</Radio>
              <Radio value={1}>1图</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            <Upload
              name="image"
              listType="picture-card"
              action="http://geek.itheima.net/v1_0/upload"
              fileList={fileList}
              onChange={handleUpload}>
              {fileList.length < type ? <PlusOutlined /> : null}
            </Upload>
          </Form.Item>

          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: '内容不能为空' }]}>
            <ReactQuill />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                发布文章
              </Button>
              <Button onClick={saveArticleDraft}>存入草稿</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
